<template>
    <div class="list_hot">
        <div class="Card-header_card">
            <div class="card-title">
                <span class="title_SE4va">{{ $t('Hot_List') }}</span>
                <!-- <span class="more">更多 &gt;</span> -->
                <a @click="$router.push(url)" target="_blank">
                    <span class="more">
                        <span>{{ $t('more') }}</span>
                        <el-icon><ArrowRight /></el-icon>
                    </span>
                </a>
            </div>
            <div class="main">
                <div class="main_item" v-for="(item,index) in game_list" :key="item.id" @click="$router.push('/home/gameCenter/'+item.id)">
                    <div class="list-item-num">
                        <svg v-if="index+1 == 1" t="1720518840627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6430" width="30" height="30"><path d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z" fill="#D81919" p-id="6431"></path><path d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z" fill="#FACC60" p-id="6432"></path><path d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z" fill="#FFFFFF" p-id="6433"></path><path d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z" fill="#F8B643" p-id="6434"></path><path d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z" fill="#FFF89F" p-id="6435"></path><path d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z" fill="#FFFFFF" p-id="6436"></path><path d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z" fill="#231815" p-id="6437"></path><path d="M556.594 800.727h-51.41V527.763l-68.956 39.578 0.408-51.41 82.827-48.147h37.131v332.943z" p-id="6438"></path></svg>
                        <svg v-if="index+1 == 2" t="1720518695406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5276" width="30" height="30"><path d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z" fill="#82A0AF" p-id="5277"></path><path d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z" fill="#E0EAED" p-id="5278"></path><path d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z" fill="#FFFFFF" p-id="5279"></path><path d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z" fill="#9EC2F7" p-id="5280"></path><path d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z" fill="#DDECF7" p-id="5281"></path><path d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z" fill="#FFFFFF" p-id="5282"></path><path d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z" fill="#231815" p-id="5283"></path><path d="M623.478 748.689v42.438h-218.7v-34.684l128.12-130.562c13.599-13.599 23.256-25.839 28.97-36.723 5.71-10.875 8.569-22.576 8.569-35.092 0-17.949-5.241-32.233-15.708-42.836-10.477-10.613-24.685-15.915-42.639-15.915-16.594 0-30.465 4.285-41.617 12.849-11.157 8.569-19.177 20.748-24.071 36.517l-37.947-22.435c7.346-22.576 19.993-39.785 37.947-51.616 17.949-11.832 40.394-17.752 67.32-17.752 20.945 0 39.644 4.285 56.102 12.854 16.454 8.569 29.237 20.542 38.355 35.908 9.108 15.371 13.669 32.711 13.669 52.024 0 18.498-4.631 35.43-13.876 50.796-9.249 15.371-24.343 33.803-45.288 55.287l-86.09 88.944h146.884z" p-id="5284"></path></svg>
                        <svg v-if="index+1 == 3" t="1720518894030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7527" width="30" height="30"><path d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z" fill="#BF4C19" p-id="7528"></path><path d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z" fill="#DC8C57" p-id="7529"></path><path d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z" fill="#FFFFFF" p-id="7530"></path><path d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z" fill="#FCC181" p-id="7531"></path><path d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z" fill="#FFE6BF" p-id="7532"></path><path d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z" fill="#FFFFFF" p-id="7533"></path><path d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z" fill="#231815" p-id="7534"></path><path d="M627.439 699.539c0 20.677-4.692 39.105-14.077 55.287-9.385 16.187-22.51 28.764-39.372 37.741-16.871 8.977-36.18 13.468-57.94 13.468-25.843 0-48.082-5.916-66.711-17.752-18.634-11.832-31.351-28.079-38.148-48.757l37.947-22.44c5.161 14.687 13.463 26.11 24.887 34.272 11.424 8.161 25.431 12.24 42.025 12.24 18.493 0 33.386-5.916 44.678-17.748 11.283-11.832 16.932-27.264 16.932-46.31 0-19.585-5.649-34.947-16.932-46.104-11.293-11.152-26.725-16.73-46.31-16.73-19.857 0-34.68 6.394-44.472 19.177l-28.97-31.417 108.53-113.836H424.654v-42.846h187.691v34.684l-86.91 91.804c19.585 0.272 37.131 4.894 52.633 13.871 15.507 8.977 27.606 21.423 36.316 37.333 8.7 15.914 13.055 33.938 13.055 54.063z" p-id="7535"></path></svg>
                        <p v-if="index+1>3" class="num">{{index+1}}</p>
                    </div>
                    <div class="list_right">
                        <div style="flex:1;"><img width="60" :src="$baseUrl+item.icon" alt=""></div>
                        <div class="list_right_r">
                            <p class="name">{{item.title}}</p>
                            
                            <!-- <p style="color: #ff6f00;">評分 {{ item.average_score || 9.9 }}</p> -->
                            <p class="score">
                                <p :title="item.desc">{{ item.desc }}</p>
                                <!-- <StarRating v-model="rating" :max-stars="5" /> -->
                                <!-- <span class="average_score">{{item.average_score || 9.9}}分推薦</span> -->
                            </p>
                            <p class="label">
                                <span v-if="lang == 'zh'" v-for="(item,index) in item.tag.slice(0,4)" :key="index">{{ item }}</span>
                                <span v-if="lang == 'en'" v-for="(item,index) in item.tag.slice(0,3)" :key="index">{{ item }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive,ref } from "vue";
import StarRating from "@/components/StarRating/index.vue"
const rating = ref(9.3/2);
const url = '/home/ranks'

const game_list = reactive([])
const getList = async () =>{
    const list = await axios.get('/gameHotList?page=1&limit=5')
    Object.assign(game_list,list.data.data)
    // console.log(game_list);
}
getList()

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.list_hot{
        width: 350px;
        margin-bottom: 20px;
        .card-title{
            position: relative;
        }
        .title_SE4va{
            font-size: 24px;
            color: rgba(0, 0, 0, .8);
            letter-spacing: 1px;
            line-height: 32px;
        }
        .more{
            font-size: 12px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 3px;
            border: 1px solid rgba(0, 0, 0, .2);
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .more:hover{
            background-color: rgb(241, 241, 241);
            
        }
        .main{
            .main_item{
                display: flex;
                margin-top: 20px;
                cursor: pointer;
                .list-item-num{
                    flex: 0.5;
                    text-align: center;
                    margin-top: 5px;
                }
                .num{
                    width: 48px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    font-weight: 700;
                    font-size: 20px;
                    color: rgba(0, 0, 0, .35);
                }
                .list_right{
                    padding-bottom: 8px;
                    border-bottom: 1px solid rgba(0, 0, 0, .2);
                    display: flex;
                    flex: 3;
                    .list_right_r{
                        margin-top: -3px;
                        flex: 3;
                        .label{
                            margin-top: 5px;
                        }
                        .label span{
                            border: 1px solid #1281d2;
                            color: #1281d2;
                            margin-right: 5px;
                            padding: 1px 5px;
                            font-size: 12px;
                            border-radius: 10px;
                            cursor: pointer;
                        }
                        .label span:hover{
                            border: 1px solid rgb(11, 145, 241);
                        }
                        .score{
                            color: #ffa726 !important;
                            font-size: 13px;
                            margin: initial;
                            display: flex;
                            align-items: center;
                            // margin-left: -2px;
                            .average_score{
                                margin-left: 10px
                            }
                            p{
                                width: 220px;
                                overflow: hidden;
                                margin-left: 0;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: 13px;
                            }
                        }
                    }
                    .list_right_r p{
                        font-size: 15px;
                        margin-bottom: 5px;
                    }
                    // .name:hover{
                    //     color: rgb(11, 145, 241);
                    //     cursor: pointer;
                    // }
                    
                }
                
                .list_right img{
                    border-radius: 14px;
                }

                
            }
            .main_item:hover{
                color: rgb(11, 145, 241);
            }
            .main_item:last-child{
                .list_right{
                    border: none;
                }
                
            }
        }
    }
</style>